<template>
  <avue-form
    ref="form"
    :defaults.sync="defaults"
    :option="infoOption"
    v-model="form"
    @submit="handleSubmit"
    @error="error"
    v-loading="infoLoading"
  >
    <template slot="attachVOS">
      <easy-upload
        style="display: inline"
        :drag="false"
        v-model="form.attachVOS"
        :disabled="['view'].includes(type)"
        :view-with-count="['view'].includes(type)"
      />
      &nbsp;
      <!-- <el-button>OCR识别--{{ type }}</el-button> -->
    </template>
    <template v-if="!['view'].includes(type) && btnFlg" slot="menuForm">
      <el-button @click="handleCancel">取消</el-button>
    </template>
  </avue-form>
</template>

<script>
import { infoOption, validateArea } from '@/option/tenant/supplier/base-info'
import { add, getDetail } from '@/api/supplier/info'
import { setStore, getStore } from '@/util/store'
export default {
  name: 'BaseInfo',
  inject: {
    type: {
      default: 'add'
    },
    btnFlg: {
      default: true
    },
    infoFlg: {
      default: true
    }
  },
  data() {
    return {
      infoLoading: false,
      defaults: {},
      form: {
        areas: [],
        outbound: '',
        busLicense: '',
        attachments: []
      },
      infoOption: infoOption.call(this),
      supplierId: getStore({ name: 'supplierId' })
    }
  },
  watch: {
    'form.outbound'(val) {
      if (val == 1) {
        this.defaults.socialCreditCode.display = true
        this.defaults.outsideIdentifier.display = false
        this.defaults.areas.rules = [{ required: true, type: 'array', validator: validateArea, trigger: 'blur' }]
      } else {
        this.defaults.socialCreditCode.display = false
        this.defaults.outsideIdentifier.display = true
        this.defaults.areas.rules = [{ required: false }]
      }
    },
    'form.areas'(val) {
      this.form.provinceCode = val[0] || ''
      this.form.cityCode = val[1] || ''
      this.form.districtCode = val[2] || ''
    }
  },
  mounted() {
    // eslint-disable-next-line no-extra-semi
    if (this.infoFlg) {
      this.supplierId && ['view', 'edit'].includes(this.type) && this.getInfo(this.supplierId)
      if (this.supplierId && ['add'].includes(this.type)) return this.getInfo(this.supplierId)
    }
  },
  methods: {
    getInfo(id) {
      this.infoLoading = true
      getDetail(id).then(res => {
        this.form = res.data.data
        this.form.areas = [res.data.data.provinceCode, res.data.data.cityCode, res.data.data.districtCode]
        this.infoLoading = false
      })
    },
    handleSubmit(form, done) {
      add(form).then(
        res => {
          this.$message.success('保存成功!')
          setStore({
            name: 'supplierId',
            content: res.data.data.id,
            type: 'session'
          })
          this.$emit('callback')
          done()
        },
        error => {
          window.console.log(error)
          done()
        }
      )
    },
    handleCancel() {
      this.$refs.form.resetForm()
      this.$emit('handleClose')
    }
  }
}
</script>

<style></style>
